<!DOCTYPE HTML>
<html>
<head>
    <title>demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-COMPATIBLE" value="IE=edge" />
    <style>
        * { padding: 0; margin: 0;}
        .style-dialog {
            width: 840; height: 675px; display: none;
        }

        .preview {
            position: absolute; width: 300px; padding: 10px; height: 500px; border: 1px solid #ddd; right: 50px; top: 100px; overflow: auto;
        }
        .preview img { max-width: 100%; }

        #result {
            position: absolute; right: 200px; background-color: deepskyblue; top: 20px; width: 80px; line-height: 40px;
            height: 40px; color: white; text-align: center; border-radius: 5px; text-decoration: none;
        }
    </style>
    <link rel="stylesheet" href="/static/editor/style/farbtastic.css"/>
    <link rel="stylesheet" href="/static/editor/tpl/style.css"/>
</head>
<body>
<div >
    <script  id="editor" type="text/plain" >这里可以书写，编辑器的初始内容</script>
</div>

<div class="style-dialog" id="styleDialog">

</div>

<!--下面两行预览功能 先隐藏不用删除-->
<a href="#" id="result" style="display:none;">获取结果</a>
<div class="preview" style="display:none;"></div>

</body>
<script type="text/javascript" charset="utf-8" src="/static/editor/script/farbtastic.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/editor/ueditor/config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/editor/ueditor/editor_all.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/editor/tpl/style_dialog.tpl.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/editor/script/plugin.js"></script>

<script type="text/javascript">
    //实例化编辑器


</script>
</html>